<template>
  <div class="box">
    <ul class="lists">
      <li>Xiaomi手机</li>
      <li>电视</li>
      <li>笔记本</li>
      <li>Redmi红米</li>
      <li>平板</li>
    </ul>
    <!--移上显示-->
    <div class="mask">
      <ul data-i="0" id="nav" class="nav-item00">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a359e9346e3c6ee8c9d8389e3fd9458.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
      </ul>
      <ul data-i="1" id="nav" class="nav-item01">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4f44496b62bac0206fb8bdbeae9d4a28.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8871821795310769c1d3896c99b12381.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0a1ae5341d2dae66cd42566c60d2d666.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0112cb7e2ea8489fbd36ce3a781d5232.jpg?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/932b583c6eccd8aabfa0771f8a854940.jpg?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
      </ul>
      <ul data-i="2" id="nav" class="nav-item02">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3a5d8336e401924d82e77c105bc90b8d.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3442ea8432af37766b3a1f900348469.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0a1ae5341d2dae66cd42566c60d2d666.png?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0112cb7e2ea8489fbd36ce3a781d5232.jpg?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/932b583c6eccd8aabfa0771f8a854940.jpg?thumb=1&w=160&h=110&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
      </ul>
      <ul data-i="3" id="nav" class="nav-item03">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2d2df29f703cb991f0425ef37ac1aa96.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e15d7d1f415b440172d0c6553c00247a.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d523ece50afa1ae1c4121c93289d7e86.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c29ce8888fee7bf46aa56cfdb5367b06.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7996692767ae8a8f3f83fb1c31fd6463.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
      </ul>
      <ul data-i="4" id="nav" class="nav-item04">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8dd1013092765f219fb3f90a1076539.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02afd89b3e5ca18b30e73b4ff7a31893.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/75f234c4bc74c6a3cc6b054b24a5a94c.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dca0249868dc6938fda3f71baafe10db.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a533fdb09c9e8d9e027ee7c1915ba815.png?thumb=1&w=240&h=165&f=webp&q=90"
          />
          <h4>Xiaomi civi</h4>
          <p>2599元起</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const lists = document.querySelectorAll(".lists li");
  const mask = document.querySelector(".mask");
  const navList = document.querySelectorAll(".mask #nav");
  const liList = document.querySelectorAll(".mask #nav li");

  // console.log(navList[0].querySelectorAll("li")[2]);

  // navList[0].querySelectorAll("li")[0].style.display = "none";

  for (let i = 0; i < lists.length; i++) {
    lists[i].setAttribute("count", i);
    lists[i].onmouseover = function (e) {
      mask.style.height = "200px";
      mask.style.borderTop = "1px solid #e0e0e0";

      const count = this.getAttribute("count");

      for (let k = 0; k < lists.length; k++) {
        // navList[i].style.display = "none";

        // console.log("navList:", navList[k]);

        for (let g = 0; g < lists.length; g++) {
          navList[k].querySelectorAll("li")[g].style.display = "none";
        }
      }

      for (let z = 0; z < lists.length; z++) {
        navList[count].querySelectorAll("li")[z].style.display = "block";
      }

      // console.log("count:", count);

      // navList[count].style.display = "block";

      // if (e.target.dataset.index == 1) {
      //   nav1.style.opacity = "1";
      //   nav2.style.opacity = "0";
      // } else if (e.target.dataset.index == 2) {
      //   nav1.style.opacity = "0";
      //   nav2.style.opacity = "1";
      // }
    };
    lists[i].onmouseout = function () {
      mask.style.borderTop = "none";
      mask.style.height = "0px";
    };
  }
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.box {
  width: 600px;
  // height: 100px;
  // margin: 0 auto;
  // margin-top: 40px;
  // margin-bottom: 30px;
  margin-left: 40px;

  .lists {
    font-size: 16px;
    height: 100px;
    // border: 1px solid red;
  }
}
.box ul {
  width: 100%;
  // height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box ul li {
  list-style: none;
  cursor: pointer;
  // width: 100%;
  /* margin-left: 34px; */
  // text-align: center;
  // padding-left: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative !important;
  // border: 1px solid red;
}

.box ul li::before {
  content: "";
  display: block;
  height: 3px;
  width: 0px;
  background-color: #ff9800;
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
}

.box ul li:hover:before {
  width: 100%;
}

.mask {
  height: 0px;
  // height: 200px;
  width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.3s ease-in-out 0.1s;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  // position: relative;
  position: absolute;
  z-index: 9999999;
  left: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  #nav {
    li {
      display: none;
    }
  }
}
.mask ul {
  height: 200px;
  width: 1200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  // background-color: #fff;
  z-index: 99999999999999999999;
}
.mask ul li {
  list-style: none;
  height: 200px;
  width: calc(100% / 5);
  text-align: center;
}
.mask ul li img {
  width: 170px;
  margin: 20px 0 0 0;
}
.mask ul li p {
  color: #fa9b1f;
}
</style>
